<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title></title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .university-header {
        padding:0.22rem 0.32rem 2.94rem;
        background-size: cover;
        position: relative;
      }
      .universitytitle {
        z-index: 3;
      }
      .modelBox {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 2;
      }
      .universitytitle {
        font-family: PingFangSC-Medium;
        font-size: 0.32rem;
        color: #fff;
        letter-spacing: 0;
        text-align: center;
        position: relative;
        margin-bottom: 0.14rem;
      }
      .universitytitle .toptitle-img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
      }
      .university-list {
        margin-top: 0.9rem;
        padding-left: 0.32rem;
        padding-right: 0.32rem;
      }

      .mescroll ul {
          list-style: none;
          padding: 0;
          margin: 0;
      }
      .mescroll ul li .videoBox {
          width: 6.86rem;
          height: 3.12rem;
          position: relative;
          /* background: pink; */
      }
      .mescroll ul li .videoBox  img {
          width: 0.96rem;
          height: 0.96rem;
          position: absolute;
          left: 50%;
          top:50%;
          transform: translate(-50%,-50%);
      }
      .mescroll ul li .subtitle {
        position: relative;
        margin-bottom: 0.18rem;
        height: 0.4rem;
      }
      /*  */
      .university-explain {
    width: 6.86rem;
    height: 2.16rem;
    margin: -0.32rem auto;
    box-shadow: 0 0 0.32rem 0 rgba(0,0,0,0.10);
    border-radius: 0.14rem;
    padding: 0.32rem 0.22rem 0.32rem 0.34rem;
    position: relative;
    z-index: 2;
  }
  .university-explain  .expalin-title {
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    line-height: 0.44rem;
    margin-bottom: 0.12rem;
  }
  .university-explain  .explain-desc{
    font-family: PingFangSC-Regular;
    font-size: 0.28rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.4rem;
    margin-bottom: 0.2rem;
  }
  .university-explain  .expalin-subtitle {
    font-family: PingFangSC-Regular;
    font-size: 0.26rem;
    line-height: 0.36rem;
  }
  .mescroll .list-title {
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 0.3rem;
  }
  .mescroll ul li {
    box-shadow: 0 0 16px 0 rgba(0,0,0,0.10);
    border-radius: 0.08rem;
    padding-bottom: 0.84rem;
    position: relative;
    /* padding-right: 0.32rem; */
  }
  .mescroll ul li::after{
    content:'';
    width: 100%;
    height: 0.4rem;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .mescroll ul li .title {
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    line-height: 0.44rem;
    margin-bottom: 0.12rem;
    margin-top: 0.24rem;
    padding-left: 0.28rem;
  }
  .mescroll ul li .subtitle span:nth-child(1){
    position: absolute;
    left: 0.28rem;
    font-family: PingFangSC-Regular;
    font-size: 0.28rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.4rem;
  }
  .mescroll ul li .subtitle span:nth-child(2){
    position: absolute;
    right: 0.34rem;
    font-family: PingFangSC-Regular;
    font-size: 0.26rem;
  }
  .mescroll ul li .time{
    font-family: PingFangSC-Regular;
    font-size: 0.26rem;
    line-height: 0.36rem;
    padding-left: 0.28rem;
  }
   .mescroll{
     padding: 0 0.32rem;
			position: fixed;
			top: 7.5rem;
			bottom: 0;
			height: auto;
		}
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
    <!--具体代码-->
    <!-- 头部 -->
    <div class="university-header">
        <div class="modelBox"></div>
        <div class="seatBox"></div>
        <div class="titleBox"></div>
    </div>

    <div class="university-explain">

    </div>
    <!-- 视频列表 -->
    <div class="university-list">
        <div class="list-title">全部视频</div>
    </div>

    <div class="mescroll" id='mescroll'>
      <ul>
      </ul>
    </div>


</div>

</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let funcCode
  let pageNum = 1
  let hasNext = true
  let mescroll
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    jsBridge.setWebFullScreen({'statusNumber':'1'})


    $('.seatBox').height(configHeight + 'rem')
    funcCode = params.funcCode
    // funcCode = '002009'
    mescroll = new MeScroll('mescroll',{
      down: {
        use: false
				  },
      up:{
        pageNum: pageNum,
        callback:getList,
        htmlNodata: '<p class="upwarp-nodata">-- 暂无更多数据 --</p>',
        noMoreSize: 10
      }
    })
    $('.mescroll ul').empty()
    getDetails(params)
    // getList(params)
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {
    pageNum = 1
    $('.mescroll ul').empty()
    getDetails()
    getList({'funcCode':funcCode,'pageNum':1})
  }
  //获取头部
  function getDetails(params){
    // Server.getElseVideoList.getApplicationVideoList({'funcCode':params.funcCode}).then(res => {
    //固定写死002，自己手动匹配一下页面
    Server.getElseVideoList.getApplicationVideoList({'funcCode':'002'}).then(res => {
      console.log(res,'aaaa')

      $('.titleBox').empty()
      $('.university-explain').empty()
      if(res.code === 0){
        let data = res.data.result.filter((item,index) => {
          return item.funcCode === funcCode
        })

        $('.university-header').css('background-image','url(' + data[0].coverImgUrl + ')')
        // console.log(data,'data')
        let header =
            `<div class="universitytitle">
                <img src="../../images/allPic/baijiantou.png" alt="" class="toptitle-img" onclick="closeWindow()">
                <span>${data[0].funcName}</span>
              </div>`

        let detail =
            `<div class="expalin-title">${data[0].funcName}</div>
              <div class="explain-desc">${data[0].funcDescribe}</div>
              <div class="expalin-subtitle">共<span>${data[0].articleCnt}</span>个视频  · <span>${data[0].readCnt}</span> 人已学</div>`

        $('.titleBox').append(header)
        $('.university-explain').append(detail)
      }else{
        // jsBridge.toast('数据异常')
      }
    })
  }
  //获取视频列表
  function getList(params){
    Server.getElseVideoList.getVideoColumnList({'funcCode':funcCode,'infoType':'2','pageSize':10,'pageNum':params.pageNum || pageNum}).then(res => {
    // Server.getElseVideoList.getVideoColumnList({'funcCode':'002009','infoType':'2','pageSize':10,'pageNum':params.pageNum||pageNum}).then(res => {
      console.log(res,'res')
      if(res.code === 0){
        let list = res.data.result.list

        //判断是否有下一页
        if(list.length < 10){
          hasNext = false
        }else{
          pageNum++
          hasNext = true
        }

        list.map((item,index) => {
          let creatTime = item.issuerDttm * 1000
          let nowTime = +new Date().valueOf()
          let year = new Date(creatTime).getFullYear()
          let month = new Date(creatTime).getMonth() + 1 < 10 ? '0' + (new Date(creatTime).getMonth() + 1) : new Date(creatTime).getMonth() + 1
          let day = new Date(creatTime).getDate() < 10 ? '0' + new Date(creatTime).getDate() : new Date(creatTime).getDate()
          let hour = new Date(creatTime).getHours() < 10 ? '0' + new Date(creatTime).getHours() : new Date(creatTime).getHours()
          let minute = new Date(creatTime).getMinutes() < 10 ? '0' + new Date(creatTime).getMinutes() : new Date(creatTime).getMinutes()
          if(nowTime - creatTime < 30 * 60 * 1000){
            if(nowTime - creatTime < 1 * 60 * 1000){
              item.issuerDttm = '刚刚'
            }else{
              item.issuerDttm = parseInt((nowTime - creatTime) / 1000 / 60) + '分钟前'
            }
          }else if(nowTime - creatTime < 24 * 60 * 60 * 1000){
            if(nowTime - creatTime < 60 * 60 * 1000){
              item.issuerDttm = '1小时前'
            }else {
              item.issuerDttm = parseInt((nowTime - creatTime) / 1000 / 60 / 60) + '小时前'
            }
          }else if(new Date().getDate() - new Date(creatTime).getDate() == 1 && new Date().getMonth() == new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
            item.issuerDttm = '昨天' + hour + ':' + minute
          }else{
            item.issuerDttm = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
          }
        })

        list.map((v,i) => {
          let li =
            `<li onclick="gochapter({'infoId':'${v.infoId}','trainingType':'${v.trainingType}'})">
                <div class="videoBox" style="background:url(${v.coverImgUrl}) no-repeat center;background-size:cover;">
                    <img src="../../images/allPic/shipingbtn.png" alt="">
                </div>
                <div class="title">
                    ${v.mainTitle}
                </div>
                <div class="subtitle">
                    <span style="font-size: 0.26rem">发布时间：${v.issuerDttm}</span>
                    <span>${v.readCnt}人观看</span>
                </div>
            </li>`

          $('.mescroll ul').append(li)
        })
        mescroll.endSuccess(10, hasNext)
      }else{
        // jsBridge.toast('数据异常')
      }
    })
  }
  //点击视频跳转到章节列表
  function gochapter(params){
    if('1' === params.trainingType || '3' === params.trainingType){
      jsBridge.openVideo({'infoId':params.infoId,'resourceType':params.trainingType})
    }else if(params.trainingType === '2'){
      jsBridge.openWindow('/html/video/videoplay.html?infoId=' + params.infoId + '&isopencomment=0',{}, {noBar: false})
    }
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //滑动加载下一页
  // document.addEventListener('scroll',function(){
  //   let top = $('.university-list ul').offset().top
  //   let height = $('.university-list ul').outerHeight(true)
  //   let maxHeight = document.body.offsetHeight
  //   let scroll = $(document).scrollTop()
  //   if(Math.round(top+height-maxHeight) === Math.round(scroll) ){
  //     pageNum++
  //     getList({'pageNum':pageNum,'funcCode':funcCode})
  //   }
  // })
</script>
</html>
